// 左侧导航

//头部

import React from "react";
import { message } from "antd";
import "./adminleft.less";
import img1 from "../../assets/img/ico.png";

import { Menu, Switch } from "antd";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";

import menulist from "../../config/menuConfig"

const { SubMenu } = Menu;

// 后台管理的home页
export default class AdminLeft extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: "dark",
      current: "1",
    };
  }

  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };

  handleClick = (e) => {
    console.log("click ", e);
    this.setState({
      current: e.key,
    });
  };

  render() {
    return (
      <div className="admin-left">
        <div className="nav-header">
          <img src={img1} alt="" />
          <h2>后台管理</h2>
        </div>
        <div className="nav-content">
          <Switch
            checked={this.state.theme === "dark"}
            onChange={this.changeTheme}
            checkedChildren="Dark"
            unCheckedChildren="Light"
          />
          <br />
          <br />
          <Menu
            theme={this.state.theme}
            onClick={this.handleClick}
            style={{ width: 256 }}
            defaultOpenKeys={["home"]}
            selectedKeys={[this.state.current]}
            mode="inline"
          >
            <Menu.Item key="home" icon={<MailOutlined />}>
              <Link to="/home">首页</Link>
            </Menu.Item>
            <SubMenu key="sub2" icon={<AppstoreOutlined />} title="商品">
              <Menu.Item key="cateGory" icon={<MailOutlined />}>
                <Link to="/cateGory">品类管理</Link>
              </Menu.Item>
              <Menu.Item key="product" icon={<MailOutlined />}>
                <Link to="/product"> 商品管理</Link>
              </Menu.Item>
            </SubMenu>

            <Menu.Item key="user" icon={<SettingOutlined />}>
              <Link to="/user">用户管理</Link>
            </Menu.Item>

            <Menu.Item key="role" icon={<SettingOutlined />}>
              <Link to="/role">角色管理</Link>
            </Menu.Item>

            <SubMenu key="sub5" icon={<AppstoreOutlined />} title="图形图表">
              <Menu.Item icon={<AppstoreOutlined />} key="bar">
                <Link to="/chars/bar">柱状图</Link>
              </Menu.Item>
              <Menu.Item icon={<AppstoreOutlined />} key="line">
                <Link to="/chars/line">折线图</Link>
              </Menu.Item>
              <Menu.Item icon={<AppstoreOutlined />} key="pie">
                <Link to="/chars/pie">饼状图</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </div>
      </div>
    );
  }
}
